import React from "react";
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

// 创建并暴露App组件(外壳)
export default class App extends React.Component {
    // 状态在哪, 操作状态的方法就在哪

    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: false },
            { id: '003', name: '学习', done: true },
        ]
    }

    // 用于添加todo, 接受的参数为todo对象
    addTodo = (todoObj) => {
        const { todos } = this.state;
        const newTodos = [todoObj, ...todos];
        this.setState({
            todos: newTodos
        })
    }

    changeChecked = (id, done) => {
        const { todos } = this.state;
        const newTodos = todos.map((todo) => {
            if (todo.id === id) return { ...todo, done };
            else return todo;
        });
        this.setState({ todos: newTodos });
    }

    handleDelete = (id) => {
        const { todos } = this.state;
        // 过滤掉id=id的, 返回不等的
        const newTodos = todos.filter((todo) => { return todo.id !== id })
        this.setState({ todos: newTodos });
    }

    changeSelect = (flag) => {
        const { todos } = this.state;
        let newTodos;
        if (flag) {
            newTodos = todos.map((todo) => {
                return {...todo, done: true}
            });
        }
        else {
            newTodos = todos.map((todo) => {
                return {...todo, done: false}
            });
        }
        this.setState({ todos: newTodos });
    }

    handleClear = () => {
        const { todos } = this.state;
        const newTodos = todos.filter((todo) => {
            return todo.done === false
        });
        this.setState({ todos: newTodos });
    }

    render() {
        const { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    {/* 父组件需要子组件的数据, 通过父组件给子组件传函数, 然后子组件引用父组件上的函数传数据 */}
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} changeChecked={this.changeChecked} handleDelete={this.handleDelete} />
                    <Footer todos={todos} changeSelect={this.changeSelect} handleClear={this.handleClear}/>
                </div>
            </div>
        );
    }
}

// 单独暴露App组件
// export default App